<!-- components/DataCard.vue -->
<template>
  <view class="data-card" :style="{ backgroundColor: data.color + '15' }">
    <text class="label">{{ data.label }}</text>
    <text class="value" :style="{ color: data.color }">{{ data.value }}</text>
  </view>
</template>

<script setup>
defineProps({
  data: Object
})
</script>

<style scoped>
.data-card {
  flex: 1;
  min-width: calc(50% - 10rpx);
  padding: 30rpx;
  border-radius: 16rpx;
  background: #e8f4ff;
  text-align: center;
  box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06);
}
.label {
  font-size: 26rpx;
  color: #666;
}
.value {
  display: block;
  margin-top: 10rpx;
  font-size: 36rpx;
  font-weight: bold;
}
</style>